<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :form="form">
        <a-row :gutter="24">
          <a-col :md="6">
            <a-form-item label="保管期限">
              <j-dict-select-tag
                type="list"
                v-decorator="['baoGuanQiXian']"
                dictCode="BaoGuanQiXian"
                :trigger-change="true"
                placeholder="请选择保管期限"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6">
            <a-form-item label="归档年度">
              <j-dict-select-tag
                type="list"
                v-decorator="['nianDu']"
                dictCode="NianDu"
                :trigger-change="true"
                placeholder="请选择归档年度"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleSubmit" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button @click="zhuiJia" type="primary">确定追加</a-button>
      <a-button @click="fanHui" type="primary">返回</a-button>
    </div>
    <div>
      <div v-if="keys==1">
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
          <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="ClearSelected">清空</a>
        </div>
        <a-table
          :columns="columns1"
          :data-source="listData"
          bordered
          rowKey="id"
          :loading="loading"
          :pagination="pagination"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <span slot="yeshu" slot-scope="text, record" style="color: #1890FF;cursor: pointer;">
            <router-link :to="{name:'juanjian',query:{id:record.id}}">{{text}}</router-link>
          </span>
        </a-table>
      </div>
      <div v-if="keys==2">
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
          <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="ClearSelected">清空</a>
        </div>
        <a-table
          :columns="columns2"
          :data-source="listData"
          bordered
          rowKey="id"
          :loading="loading"
          :pagination="pagination"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <span slot="yeshu" slot-scope="text, record" style="color: #1890FF;cursor: pointer;">
            <router-link :to="{name:'juanjian',query:{id:record.id}}">{{text}}</router-link>
          </span>
        </a-table>
      </div>
    </div>
  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'YiJiaoQingCeList',
  components: {},
  data() {
    return {
      // 列表
      listData: [],
      selectedRowKeys: [],
      loading: true,
      columns1: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 80,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '卷号',
          align: 'center',
          dataIndex: 'anJuanHao',
        },
        {
          title: '保管期限',
          align: 'center',
          dataIndex: 'baoGuanQiXian_dictText',
        },
        {
          title: '归档机构',
          align: 'center',
          dataIndex: 'jiGouMingCheng',
        },
        {
          title: '归档年度',
          align: 'center',
          dataIndex: 'nianDu',
        },
        {
          title: '卷内件',
          align: 'center',
          dataIndex: 'count',
          scopedSlots: { customRender: 'yeshu' },
        },
      ],
      columns2: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 80,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '盒号',
          align: 'center',
          dataIndex: 'heHao',
        },
        {
          title: '保管期限',
          align: 'center',
          dataIndex: 'baoGuanQiXian_dictText',
        },
        {
          title: '归档机构',
          align: 'center',
          dataIndex: 'jiGouMingCheng',
        },
        {
          title: '归档年度',
          align: 'center',
          dataIndex: 'nianDu',
        },
        {
          title: '盒内件',
          align: 'center',
          dataIndex: 'count',
          scopedSlots: { customRender: 'yeshu' },
        },
      ],
      pagination: { pageSize: 10, current: 1, total: 0, showTotal: (total, a, b, c) => `总共 ${total} 条数据` },
      form: this.$form.createForm(this, { name: 'register' }),
      toggleSearchStatus: false,
      search: {},
      keys: this.$route.query.keys,
    }
  },
  created() {
    if (this.keys == 1) {
      this.listJuan()
    } else if (this.keys == 2) {
      this.listHe()
    }
  },
  methods: {
    // 卷列表
    listJuan(values) {
      getAction(`/daJuan/list?liuZhuanZhuangTai=${8}`, { ...values }).then((res) => {
        if (res.code == 200) {
          this.listData = res.result.records
          this.loading = false
          const pagination = { ...this.pagination }
          pagination.total = res.result.total
          this.pagination = pagination
        }
      })
    },
    // 盒列表
    listHe(values) {
      getAction(`/daHe/list?liuZhuanZhuangTai=${8}`, { ...values }).then((res) => {
        if (res.code == 200) {
          this.listData = res.result.records
          this.loading = false
          const pagination = { ...this.pagination }
          pagination.total = res.result.total
          this.pagination = pagination
        }
      })
    },
    // 复选框
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    // 清空
    ClearSelected() {
      this.selectedRowKeys = []
    },
    // 查询
    handleSubmit(e) {
      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
        this.search = values
        this.search.pageNo = 1
        this.pagination.current = 1
        if (this.keys == 1) {
          this.listJuan(this.search)
        } else if (this.keys == 2) {
          this.listHe(this.search)
        }
      })
    },
    // 重置
    searchReset() {
      this.search.pageNo = 1
      this.pagination.current = 1
      this.search = {}
      this.form.resetFields()
      if (this.keys == 1) {
        this.listJuan()
      } else if (this.keys == 2) {
        this.listHe()
      }
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    // 返回
    fanHui() {
      this.$router.push({ path: '/yijiao-dengji', query: { id: this.$route.query.id, keys: this.$route.query.keys } })
    },
    // 追加
    zhuiJia() {
      if (this.selectedRowKeys.length > 0) {
        let ids = this.selectedRowKeys.join()
        let body = {}
        body.ids = ids
        body.id = this.$route.query.id
        body.type = this.keys
        postAction('/yjYiJiaoJieShou/addJuanOrHe', { ...body }).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message)
            if (this.keys == 1) {
              this.listJuan(this.search)
            } else if (this.keys == 2) {
              this.listHe(this.search)
            }
          }
        })
      } else {
        this.$message.error('请选择要追加的数据!')
      }
    },
  },
}
</script>

<style lang="less">
</style>